<template>
  <div id="map">

  </div>
</template>

<script setup>
import mapboxgl from "mapbox-gl";
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
import {onMounted, reactive} from "vue";

let map;
onMounted(() => {
  mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'

  // init map
  map = new mapboxgl.Map({
    container: 'map', // 地图容器id
    style: 'mapbox://styles/mapbox/streets-v12', // 地图样式
    center: [30.0222, -1.9596], // 地图初始中心
    zoom: 7, // 地图初始缩放级别
    localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif"
  })
  // Add a scale control(缩放控制插件) to the map
  map.addControl(new mapboxgl.ScaleControl());
  // Mapbox汉化处理
  map.addControl(new MapboxLanguage({
    defaultLanguage: 'zh-Hans'
  }));

  map.on('load', () => {
    map.addSource('rwanda-provinces', {
      'type': 'geojson',
      'data': '/geojson/rwanda-provinces.geojson'
    });
    map.addLayer(
      {
        'id': 'rwanda-provinces',
        'type': 'fill',
        'source': 'rwanda-provinces',
        'layout': {},
        'paint': {
          'fill-color': [
            'let',
            'density',
            ['/', ['get', 'population'], ['get', 'sq-km']],
            [
              'interpolate',
              ['linear'],
              ['zoom'],
              8,
              [
                'interpolate',
                ['linear'],
                ['var', 'density'],
                274,
                ['to-color', '#f5e5f3'],
                1551,
                ['to-color', '#8d00ac'],
              ],
              10,
              [
                'interpolate',
                ['linear'],
                ['var', 'density'],
                274,
                ['to-color', '#f5e5f3'],
                1551,
                ['to-color', '#8d00ac'],
              ]
            ]
          ],
          'fill-opacity': 0.7
        }
      },
      'road-label' // Place polygons under labels
    )
  })
})
</script>

<style lang="scss" scoped>
#map {
  height: 100vh;
  width: 100%;
}
</style>
